<template>
	<view class="kindlist">
		
			<view class="sort">
				
				<view v-for="(item,index) in list" :class="{act:index == current}" class="screen" :key="index" @tap="event(index)">
					{{item.name}}
					<view class="box" v-if="index == 1 || index == 2">
						<uni-icons :color="item.selectedIconStatus == 'up' ? '#dd524d' : '#fff' " type="arrowup" size="15"></uni-icons>
						<uni-icons :color="item.selectedIconStatus == 'down' ? '#dd524d' : '#fff' " type="arrowdown" size="15"></uni-icons>
					</view>

				</view>

			</view>


		
		<view class="list">
			<view class="main" v-for="(item,index) in productList":key="index" @tap="go(item.id)">
				<image :src="item.pic" mode=""></image>
				<view class="text">
					<view class="title">
						{{item.name}}
					</view>
					<view class="bottom">
						<view class="price">
							￥{{item.price}}元
						</view>
						<view class="origin">
							不凡
						</view>
					</view>
				</view>
			</view>
			<view class="main">
				
			</view>
		</view>
	</view>

</template>

<script>
	import {
		findProductList
	} from "../../../api/kind/kindList/index.js"
	export default {
		onLoad: function(option) {
			this.id = option.id;
			this.getList({
				categoryId: option.id,
				isDesc: "",
				sortBy: ""
			})



		},
		data() {
			return {
				productList: [],
				current:0,
				isDesc:"",
				sortBy:"",
				start:1,
				limit:5,
				id:0,
				total:0,
				
				list: [{
						name: "新品"
					},
					{
						name: "销量",
						selectedIconStatus: "default" // 默认状态"default"  向上状态up  向下状态 down
					},
					{
						name: "价格",
						selectedIconStatus: "default" // 默认状态"default"  向上状态up  向下状态 down
					},
					{
						name: "筛选"
					}
				]
			}
		},
		onPullDownRefresh(){
			
			this.start = 1;
			this.limit = 5;
			this.productList = [];
			this.getList({
				categoryId: this.id,
				isDesc: this.isDesc,
				sortBy: this.sortBy 
			})
		},
		onReachBottom(){
			if(this.total > this.start*this.limit){
				this.start++;
				this.getList({
					categoryId: this.id,
					isDesc: this.isDesc,
					sortBy: this.sortBy
				})
			}else{
				uni.showToast({
					title:"我真的一滴都没有了...",
					icon:"none"
				})
			}
		},

		methods: {
			getList(data) {
				findProductList(this.start,this.limit,data).then(res => {
					console.log(res);
					
					this.productList.push(...res.data.rows);
					// this.productList = res.data.rows;
					uni.stopPullDownRefresh();
					this.total = res.data.total;

				})
			},
			go(val){
				console.log(val)
				uni.navigateTo({
					// pages/Detail/Detail
					// url:`../kind/kindList/kindList?id=${1}`
					url:`/pages/Detail/Detail?id=${val}`
				})
			},
			fn(val){
				var item = this.list.find((ele,index)=>index == val);
				if(item.selectedIconStatus == "default"){
					item.selectedIconStatus = "up";
					this.isDesc = 1
				}else if(item.selectedIconStatus == "up"){
					item.selectedIconStatus = "down"
					this.isDesc = 0
				}else{
					item.selectedIconStatus = "up"
					this.isDesc = 1
				}
				this.current = val;
				this.getList({
					categoryId: this.id,
					isDesc: this.isDesc,
					sortBy: this.sortBy
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			event(val){
				// var item = this.list.find((ele,index)=>index == val);
				this.productList = [];
				this.start = 1;
				this.limit = 5;
				if(this.current == val){
					// console.log(1)
					this.fn(val)
					
				}else{
					this.list.forEach(ele=>ele.selectedIconStatus = "default")
					if(this.list[val].name == "销量"){
						this.sortBy = "sale"
					}else if(this.list[val].name == "价格"){
						this.sortBy = "price"
					}
					this.fn(val)
					// console.log(2)
				}
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import './css/kindList.scss';
</style>
